<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
        /*	
            背景图片：background-image: yrl(图片地址)，
                如果图片大小大于容器大小，超出的部分隐藏。 如果小于容器大小 默认铺满
            -图片大小：background-size: 图片的宽 图片的高； auto自动
                 --①. px(和img效果类似，只设置高宽或者宽度，就不会拉伸) 只设置高auto 500px  
                只设置宽500px auto 
                --②. 百分比%   相对与容器来说的 80% auto
                --③. cover    代表会自动填满容器 
            -图片平铺： background-repeat:默认平铺
                 --no-repeat 不平铺
                 --repeat-x  水平方向上重复
                 --repeat-y  垂直方向重复
            -图片位置： background-position：水平移动距离， 垂直；
            注意： 如果只有一个水平方向的参数，垂直方向默认居中
                 --①  关键字
                          水平： left center right
                          垂直： top  center bottom
                 --②  单位px 

                 --③ 百分比%
            -图片固定： background-attachment
                 --fixed 加上这个属性， 背景图片的参考点就变成了浏览器窗口 
        	*/
		div{
			width: 100%;
			height: 800px;
            /*background-image: url(../../小黑子/2.png);
            background-size:  50%;
            background-repeat: no-repeat;
            background-color: #8D382E;
            background-position: right;
            background-attachment: fixed;*/
            background: url(../../小黑子/2.png) #8D382E no-repeat 100px fixed ;
            /*  不参与到综合写法           */
            background-size: 50%;
		}
	</style>
</head>
<body>
      <div>
      	   
      </div>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v
</body>
</html>